<!--
 * @Description: description
 * @version: 0.1
 * @Author: youhuimin
 * @Date: 2021-09-13 14:56:57
 * @LastEditors: youhuimin
 * @LastEditTime: 2021-09-13 16:09:29
 * @FilePath: \xdeas-user-web\src\components\area_name.vue
-->
<template>
    <a-tooltip placement="top" v-if="text">
        <template slot="title">
            <span>{{ text }}</span>
        </template>
        <div class="ellipsis" :style="{width:maxWidth + 'px'}">
            <i class="iconfont icon-20_show_locale c-65B168 fs-20"></i>

            <!-- 这里的22是左侧icon和maigin的值 -->
            <span class="ml-5" v-if="getTextWidth(text) < (maxWidth - 22)">{{ text }}</span>
            <span v-else class="ml-5">
                {{filterTxt() }}
            </span>
        </div>
    </a-tooltip>
</template>

<script>
import global from "@/assets/js/global";

export default {
    // 用于展示多级的区域名称,父级.../子级这种方式
    name: "area-name",
    components:{},
    mounted() {

    },
    props:{
        text:{
            // 包含全部层级的名称,一般是roomName
            type:String,
        },
        list:{
            // 层级数组
            type:Array,
        },
        maxWidth:{
            // 整个盒子的宽度,超过之后会省略
            type:Number,
            default:200,
        },
        ellipsisWidth:{
            // 当父级需要被省略的时候,父级的宽度
            type:Number,
            default:40
        }
    },
    data(){
        return{
        }
    },
    methods:{
        getTextWidth(txt){
            return global.getTextWidth(txt)
        },
    },
    computed:{
        filterTxt(){
            return function(){
                let arr = this.list.map((t,index)=>{
                    if(index == this.list.length -1 || t.name.length < 3){
                        // 最后一个层级的话,就直接添加在最后
                        return t.name
                    }else if(t.name.length >= 3){
                    //     如果超过3个字符,就变成2个字符加...显示
                        return t.name.substring(0,2) + '...'
                    }
                })
                return arr.join('/')
            }
        },
    }
}
</script>

<style scoped>

</style>